<template>
    <BaseDialog v-bind="dialogInfo">
        <BaseForm ref="BaseFormRef" v-bind="formInfo"></BaseForm>
    </BaseDialog>
</template>

<script lang="jsx" setup>
import { useDialogCRUD } from '@/composables'
import { navTypeList } from '@/constants/dict'
import {  reactive, ref, watch } from 'vue'
import { useFileDialog } from '@vueuse/core'
import { ElLoading } from 'element-plus'

const props = defineProps({
    addApi: Function,
    updateApi: Function
})

const emit = defineEmits(['submit'])

const BaseFormRef = ref(null)

const formInfo = reactive({
    labelWidth: '120px',
    formList: [
        {
            type: 'input',
            prop: 'sysName',
            label: '导航名称',
            rules: { required: true, message: '字段必填', trigger: 'blur' },
            col: {
                span: 12
            }
        },
        {
            type: 'select',
            prop: 'subSystemType',
            props: {
                class: 'w-100%',
                options: navTypeList
            },
            label: '导航类型',
            rules: { required: true, message: '字段必填', trigger: 'change' },
            col: {
                span: 12
            }
        },
        {
            type: 'input',
            prop: 'url',
            label: '导航地址',
            rules: { required: true, message: '字段必填', trigger: 'blur' },
            col: {
                span: 12
            }
        },
        {
            type: 'radio-group',
            prop: 'visible',
            props: {
                options: [
                    {
                        label: true,
                        customLabel: '显示'
                    },
                    {
                        label: false,
                        customLabel: '不显示'
                    }
                ]
            },
            label: '是否显示',
            rules: { required: true, message: '字段必填', trigger: 'change' },
            col: {
                span: 12
            }
        },
        {
            type: 'input',
            prop: 'orderNo',
            label: '排序',
            rules: { required: true, message: '字段必填', trigger: 'blur' },
            col: {
                span: 12
            }
        },
        {
            type: 'input',
            prop: 'screenName',
            label: '大屏标识符',
            rules: { required: true, message: '字段必填', trigger: 'blur' },
            isShow: () => {
                return [3].includes(formInfo.formData.subSystemType)
            },
            col: {
                span: 12
            }
        },
        {
            type: 'input',
            prop: 'describeContent',
            label: '描述',
            isShow: () => {
                return [3].includes(formInfo.formData.subSystemType)
            },
            col: {
                span: 12
            }
        },
        {
            type: 'input',
            prop: 'remark',
            label: '备注',
            col: {
                span: 12
            }
        }
    ],
    formData: {}
})

const { dialogInfo, toggleDialog, openDialog } = useDialogCRUD({
    api: {
        addData: props.addApi,
        updateData: props.updateApi
    },
    BaseFormRef,
    formInfo,
    customBeforeOpen: async () => {
        
    },
    customConfirmFormData: formData => {
        return Object.assign({}, formData)
    },
    customAfterConfirm: () => {
        emit('submit')
    }
})

defineExpose({
    toggleDialog,
    openDialog
})

const {
    files: imgFiles,
    open: openImgUploadDialog,
    reset: resetImgFiles
} = useFileDialog({
    multiple: false,
    accept: '.jpg,.jpeg,.png,.gif'
})

watch(imgFiles, async files => {
    if (!files) return
    const [file] = files

    const formData = new FormData()
    formData.append('file', file)
    formData.append('recordKid', formInfo.formData.kid)

    const loading = ElLoading.service()
    try {
        const res = await fileApi.fileUpload({ data: formData })
        const { resourceUrl, fileName } = res
        Object.assign(formInfo.formData, {
            imgUrl: resourceUrl
        })
        ElMessage.success('上传成功')
    } catch (error) {
        defaultCatchError(error)
    } finally {
        resetImgFiles()
        loading.close()
    }
})
</script>

<style lang="scss" scoped>
:deep() {
    .upload-img-input {
        .el-input-group__append {
            padding: 0;

            div {
                padding: 0 20px;
            }
        }
    }
}
</style>